<template>
<div>
  <w-bread-nav title="贷款申请"></w-bread-nav>
  <div class="app-container apply">
    <div class="input-area">
      <div class="row">
        <div class="col-md-6 name">订单编号</div>
        <div class="col-md-6 input" v-text="orderInfo.order_id"></div>
      </div>
      <div class="row">
        <div class="col-md-6 name">订单来源</div>
        <div class="col-md-6 input">好下单</div>
      </div>
      <div class="row">
        <div class="col-md-6 name">订单金额</div>
        <div class="col-md-6 input" v-text="orderInfo.order_amount"></div>
      </div>
      <div class="row">
        <div class="col-md-6 name">联系人电话</div>
        <div class="col-md-6 input" v-text="$store.getters.mobile"></div>
      </div>
      <div class="row">
        <div class="col-md-6 name">联系人</div>
        <div class="col-md-6 input">
          <input type="text" v-model="orderInfo.user_name" placeholder="请填写联系人姓名">
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 name">贷款期限</div>
        <div class="col-md-6 input">
          <select class="input-w" v-model="orderInfo.loan_term">
            <option :value="data.id" v-for="(data, index) in LimitDate" :key="index">{{data.name}}</option>
          </select>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 name">用户类型</div>
        <div class="col-md-6 input">
          <select class="input-w" v-model="orderInfo.user_type">
            <option :value="`P`">个人</option>
            <option :value="`C`">企业</option>
          </select>
        </div>
      </div>
      <!--
      <div class="row">
        <div class="col-md-6 name">不动产抵押</div>
        <div class="col-md-6 input">
          <select class="input-w" v-model="orderInfo.loan_mortgage">
            <option value="1">有</option>
            <option value="2">无</option>
          </select>
        </div>
      </div>
      -->
      <div class="row">
        <div class="col-md-6 name">贷款机构</div>
        <div class="col-md-6 input">
          <select class="input-w" v-model="orderInfo.institution_id">
            <option :value="inst.id" v-for="(inst, index) in instutions" :key="index">{{inst.institution_name}}</option>
          </select>
        </div>
      </div>
    </div>
    <div class="btn-group">
      <w-button type="main" @on-click="doLoanApply">下一步</w-button>
    </div>
  </div>
</div>
</template>

<script>
import { apiGetAllInstitutionNames, apiIsExist, apiFinceRegist, apiLoanApply, apiOrderFina } from 'js/api'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      orderInfo: {
        id: this.$route.params.mainId || '', // 主订单id
        order_id: '', // 订单编号
        // loan_mortgage: 1, // 有无不动产
        user_phone: this.$store.getters.mobile,
        user_name: '', // 联系人
        from: '好下单',
        user_type: 'P', // 用户类型
        order_amount: '', // 订单金额
        loan_term: 1, // 贷款期限
        institution_id: 1, // 贷款机构id
        institution_name: ''
      },
      LimitDate: [
       {id: 1, name: '1个月'},
       {id: 2, name: '2个月'},
       {id: 3, name: '3个月'},
       {id: 4, name: '4个月'},
       {id: 5, name: '5个月'},
       {id: 6, name: '6个月'},
       {id: 7, name: '7个月'},
       {id: 8, name: '8个月'},
       {id: 9, name: '9个月'},
       {id: 10, name: '10个月'},
       {id: 11, name: '11个月'},
       {id: 12, name: '12个月'}
      ], // 贷款期限
      instutions: []
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    /*
     * 请求订单数据
     */
    getiOrderInfo() {
      this.orderInfo.order_id = this.$route.params.orderId
      this.orderInfo.order_amount = this.$route.params.price
    },
    /*
     * 请求贷款机构
     */
    getAllInstitutionName() {
      apiGetAllInstitutionNames().then((data) => {
        this.instutions = data.names
      })
    },
    /*
     * 判断是否为供应链一有用户
     */
    authorIsExist() {
      apiIsExist(this.$store.getters.mobile).then((data) => {
        if (data != '400') {
          this.doFinceRegist()
        }
      })
    },
    /*
    * 注册为供应链用户
     */
    doFinceRegist() {
      let data = {
        user_phone: this.$store.getters.mobile,
        form: 'haoxiadan',
        type: 'auto',
        User_name: this.$store.getters.userName
      }
      apiFinceRegist(data).then((data) => {
        console.log(data)
      })
    },
    /*
    * 申请贷款
     */
    doLoanApply() {
      if (this.orderInfo.user_name == '') {
        this.$toast('请输入联系人')
        return
      }
      this.instutions.forEach((item) => {
        if (item.id == this.orderInfo.institution_id) {
          this.orderInfo.institution_name = item.institution_name
        }
      })
      const par = {
        id: this.$route.params.mainId,
        accessToken: this.token
      }
      apiLoanApply(this.orderInfo).then((data) => {
        apiOrderFina(par).then(res => {
          this.$router.push('/loan/success')
        })
      })
    }
  },
  created() {
    this.authorIsExist()
    this.getiOrderInfo()
    this.getAllInstitutionName()
  }
}
</script>

<style lang="scss" scoped>
.apply {
  background-color: #FFFFFF;
  border-bottom: 1px solid #f6f6f6;
  padding-top: 40px;
  margin-top: 20px;
  height: 440px;

  .input-area {
    border-bottom: 1px solid #f6f6f6;
    height: 300px;
    .row {
      height: 20px;
      line-height: 20px;
      margin-bottom: 12px;

      .name {
        color: #999999;
        text-align: right;
      }

      .input {
        color: #666666;
        text-align: left;

        input, select {
          border: 1px solid #ddd;
          color: #666;
          font-size: 12px;
          width: 130px;
          height: 20px;
          line-height: 20px;
          padding-left: 10px;
        }
      }
    }
  }

  .btn-group {
    padding: 20px 40px 30px 0;
    text-align: right;
    .main {
      width: 180px;
    }
  }
}
</style>
